<template>
  <div class="municipalLeaders">
    <div class="municipalLeaders_title">
      <div style="flex:1">
        <span class="title">
          <span class="titleWrap">
            16个场景
          </span>
        </span>
      </div>
      <div style="flex:1">
        <div style="display:inline-block;margin-top:10px">
          <div style="text-align: center;font-size:16px;font-weight:bolder;color:black;margin-bottom:10px">场景上线情况</div>
          <div style="height:calc(18vh);width:calc(20vw)">
            <VEcharts
              autoresize
              :options="rightConfig"
              style="width: 100%; height: 100%"
            />
          </div>
        </div>
      </div>
      <div style="flex:1">
        <span style="display:inline-block;margin-top:10px">
          <div style="text-align: center;font-size:16px;font-weight:bolder;color:black;margin-bottom:10px">归口领域情况图</div>
          <div style="height:calc(18vh);width:calc(20vw)">
            <VEcharts
              autoresize
              :options="rightConfig1"
              style="width: 100%; height: 100%"
            />
          </div>
        </span>
      </div>
    </div>
    <div class="municipalLeaders_body">
      <div class="oneAccountPage_body_search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="牵头领导">
            <el-input v-model="formInline.user" placeholder="牵头领导" />
          </el-form-item>
          <el-form-item label="场景名称">
            <el-input v-model="formInline.user" placeholder="场景名称" />
          </el-form-item>
          <el-form-item label="责任单位">
            <el-select v-model="formInline.region" placeholder="责任单位">
              <el-option label="诸暨市" value="shanghai" />
              <el-option label="市委人才办" value="beijing" />
              <el-option label="越城区" value="beijing1" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary">搜索</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <vxe-table
          border
          stripe
          resizable
          highlight-hover-row
          height="380"
          :loading="loading"
          :checkbox-config="{labelField: 'id', highlight: true, range: true}"
          :data="tableData"
        >
          <vxe-table-column type="seq" width="40" />
          <vxe-table-column field="name" min-width="80" title="牵头领导" show-overflow />
          <vxe-table-column field="sex" min-width="120" title="场景名称" show-overflow />
          <vxe-table-column field="age" title="场景描述" min-width="380" show-overflow />
          <vxe-table-column min-width="90" field="address" title="归口领域" show-overflow />
          <vxe-table-column min-width="80" field="address1" title="责任单位" show-overflow />
          <vxe-table-column
            fixed="right"
            min-width="80"
            title="操作"
          >
            <template #default="{ row }">
              <span style="cursor:pointer">
                <span v-if="row.type===&quot;未上线&quot;" style="color:gray">{{ row.type }}</span>
                <span
                  v-else
                  style="color:blue;"
                >{{ row.type }}</span>
              </span>

            </template>
          </vxe-table-column>
        </vxe-table>
      </div>

    </div>
  </div>

</template>

<script>
import VEcharts from '@/components/vecharts';
export default {
  components: {
    VEcharts
  },
  data() {
    return {
      tableData: [
        { name: '马卫光', sex: '兴村治社共同富裕多跨场景', age: '以县乡村一体、条抓块统”为牵引．以．兴杯台社、共同富裕为目标．打通决策部署落实的堵点难点，推动任务事项和政策智能直达、高效落地、闭环管理”．促进村社减负、资源整合、服务患民、共同富裕．', address: '党政机关整体智治', address1: '市委办', type: '灰度上线' },
        { name: '盛阅春', sex: '惠企政策智兑平台', age: '以县乡村一体、条抓块统”为牵引．以．兴杯台社、共同富裕为目标．打通决策部署落实的堵点难点，推动任务事项和政策智能直达、高效落地、闭环管理”．促进村社减负、资源整合、服务患民、共同富裕．', address: '党政机关整体智治', address1: '市委办', type: '未上线' },
        { name: '盛阅春 魏伟', sex: '惠企政策智兑平台', age: '以县乡村一体、条抓块统”为牵引．以．兴杯台社、共同富裕为目标．打通决策部署落实的堵点难点，推动任务事项和政策智能直达、高效落地、闭环管理”．促进村社减负、资源整合、服务患民、共同富裕．', address: '党政机关整体智治', address1: '市委办', type: '已上线' },
        { name: '马卫光', sex: '兴村治社共同富裕多跨场景', age: '以县乡村一体、条抓块统”为牵引．以．兴杯台社、共同富裕为目标．打通决策部署落实的堵点难点，推动任务事项和政策智能直达、高效落地、闭环管理”．促进村社减负、资源整合、服务患民、共同富裕．', address: '党政机关整体智治', address1: '市委办', type: '灰度上线' },
        { name: '盛阅春', sex: '惠企政策智兑平台', age: '以县乡村一体、条抓块统”为牵引．以．兴杯台社、共同富裕为目标．打通决策部署落实的堵点难点，推动任务事项和政策智能直达、高效落地、闭环管理”．促进村社减负、资源整合、服务患民、共同富裕．', address: '党政机关整体智治', address1: '市委办', type: '未上线' },
        { name: '盛阅春 魏伟', sex: '惠企政策智兑平台', age: '以县乡村一体、条抓块统”为牵引．以．兴杯台社、共同富裕为目标．打通决策部署落实的堵点难点，推动任务事项和政策智能直达、高效落地、闭环管理”．促进村社减负、资源整合、服务患民、共同富裕．', address: '党政机关整体智治', address1: '市委办', type: '已上线' }

      ],
      formInline: {
        user: '',
        region: ''
      },
      rightConfig: {
        grid: {
          bottom: '30%',
          top: '5%',
          left: '10%'
        },
        xAxis: {
          type: 'category',
          data: ['已上线', '灰度上线', '未上线']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          barWidth: 20

        }]
      },
      rightConfig1: {
        legend: {
          orient: 'vertical',
          left: 'right',

          textStyle: { // 图例文字的样式
            color: 'black',
            fontSize: 8
          }

        },
        color: ['#91cc76', '#ef6666', '#1a8fff', '#5470c6', 'orange'],
        grid: {
          bottom: '-2%',
          top: '10%'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '70%',
            data: [
              { value: 2, name: '党政机关' },
              { value: 3, name: '数字政府' },
              { value: 3, name: '数字社会' },
              { value: 5, name: '数字经济' },
              { value: 6, name: '数字法治' }

            ],
            label: { // 饼图图形上的文本标签
              normal: {
                show: true,
                position: 'inner', // 标签的位置
                textStyle: {
                  fontWeight: 300,
                  fontSize: 12 // 文字的字体大小
                },
                formatter: '{d}%'

              }
            },

            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    };
  }

};
</script>

<style lang='scss' scoped>
  .municipalLeaders{
    padding:15px;
    .municipalLeaders_title{
      height: calc(22vh);
      background: #fff;
      border-radius: 10px;
      display: flex;
      text-align: center
    }
  }
  .title{
    margin-top:30px;
    display: inline-block
  }
  .titleWrap{
    width: 95px;
    height: 95px;
    display: inline-block;
    border-radius: 50%;
    background-color: #1a8fff;
    line-height: 95px;
    color: #fff;
    font-weight: bolder;
    font-size: 17px;
    margin-top: 20px;
  }
  .municipalLeaders_body{
    margin-top: 10px;
    background: #fff;
    border-radius: 10px;
    padding: 15px
  }

</style>
